<template>
	<view>
		<!-- 顶部标题 -->
		<!-- <view class="head_text">
			<text>修改密码</text>
			<image src="../../static/client/back.png"
				style="width: 20rpx;height: 36rpx;position: absolute;left: 30rpx;top: 63rpx;" @click="back()"></image>
		</view> -->
		<!-- 账号名称 -->
		<view class="alter_item">
			<text>账号名称</text>
			<text style="color: #666666;margin-left: 58rpx;">{{nickname}}</text>
		</view>
		<!-- 账号 -->
		<view class="alter_item">
			<text>账号</text>
			<text style="color: #666666;margin-left: 116rpx;">{{userName}}</text>
		</view>
		<!-- 新密码 -->
		<view class="alter_item">
			<text>新密码</text>
			<input type="password" v-model="editPsdForm.password" class="item_input" placeholder="请输入新密码"
				placeholder-style="font-size: 28rpx;" />
		</view>
		<!-- 确认密码 -->
		<view class="alter_item">
			<text>确认密码</text>
			<input type="password" v-model="editPsdForm.repassword" class="item_input" placeholder="请再次输入密码"
				placeholder-style="font-size: 28rpx;" />
		</view>
		<!-- 验证码 -->
		<view class="alter_item">
			<text>验证码</text>
			<input v-model="editPsdForm.code" class="item_input" placeholder="请输入验证码"
				placeholder-style="font-size: 28rpx;" />
			<view class="yanzhengma" @click="getVerify()">
				<text>获取验证码</text>
			</view>
			<view class="count_down" v-show="show_count">
				<text>倒计时{{currentTime}}秒</text>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" form-type="reset">取消</button>
			<button class="bottom_btn"
				style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
				form-type="submit" @click="handleChangePsdSubmit">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				company_id: '',
				nickname: '',
				userName: '',
				show_count: false, //控制是否显示验证码倒计时
				currentTime: 0, //显示时间变量
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				editPsdForm: {
					code: '',
					password: '',
					repassword: '',
				}
			}
		},
		async onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
			this.nickname = uni.getStorageSync('btlh_process_nickname') || ''
			this.userName = uni.getStorageSync('btlh_process_usernameForIndex') || ''
		},
		methods: {
			// 点击提交修改密码
			async handleChangePsdSubmit() {
				if (this.editPsdForm.password != this.editPsdForm.repassword) return uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				const {
					data: res
				} = await this.$myRequest({
					url: 'User/update_password',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,

						code: this.editPsdForm.code,
						password: this.editPsdForm.password,
						repassword: this.editPsdForm.repassword,
					},
				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.switchTab({
					url: '/pages/me/me'
				})
			},
			// 点击获取验证码
			async getVerify() {
				this.show_count = !this.show_count
				this.currentTime = this.totalTime
				this.checkingTime()
				// 获取验证码(旧手机)
				const {
					data: res
				} = await this.$myRequest({
					url: 'User/send_message',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
					},
				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
			},
			/* 
			点击返回 
			 */
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 改变倒计时方法
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.show_count === true) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.show_count = !this.show_count; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.show_count = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			}
		}
	}
</script>

<style>
	.count_down {
		width: 170rpx;
		height: 54rpx;
		background: #999999;
		border-radius: 5rpx;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
		font-size: 24rpx;
		position: absolute;
		top: 20rpx;
		right: 0;
	}

	.yanzhengma {
		width: 170rpx;
		height: 54rpx;
		background: #40A0F2;
		border-radius: 5rpx;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
		font-size: 24rpx;
		position: absolute;
		top: 20rpx;
		right: 0;

	}

	.bottom {
		width: 100%;
		height: 88rpx;
		position: absolute;
		bottom: 0;
	}

	.bottom_btn {
		width: 375rpx;
		height: 88rpx;
		margin-left: 0;
		border-radius: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.item_input {
		position: absolute;
		top: 28rpx;
		left: 169rpx;
	}

	.alter_item {
		width: 690rpx;
		height: 95rpx;
		border-bottom: 1rpx solid #E9E9E9;
		margin-left: 30rpx;
		line-height: 95rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 160rpx;
		text-align: center;
		border-bottom: 19rpx solid #F7F7F7;
	}
</style>
